<template>
	<view>
		<view class="cash_info_box" v-if="data !== undefined && data!== null && data.length>0">
			<view class="cash_info_list" v-for="(item,index) in data" :key="index">
				<view class="cash_info_tit">
					<text v-if="item.status == 1" :class="item.class_name">{{item.payment_status_text}}</text>
					<text class="gray_y" v-else>已作废</text>
					<text>-{{item.withdrawal_money}}</text>
				</view>
				<view class="cash_info_cont">
					<text>余额提现</text>
					<text>{{item.create_time_text}}</text>
				</view>
				<view class="seal" v-if="item.status == 2" style="border: 3px solid #f26868;color: #f26868;">已作废</view>
				<view class="seal" v-if="item.payment_status == 2" style="border: 3px solid #1296db;color: #1296db;">已到账
				</view>
			</view>
		</view>
		<u-empty v-else mode="order" icon="/static/Empty/data_null.png" text="您还没有提现呢">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				page: 1,
				className: 'warn_y',
				bottom: true
			}
		},
		onLoad(e) {
			this._list()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this._list()
			}
		},
		methods: {
			// 获取列表数据
			async _list() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('merinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Withdraw/withdrawalRecord',
					data: {
						page: this.page,
						page_size: '10'
					},
					header: {
						'token': userinfo.token
					},
				});
				if (res.code == 1) {
					if (res.data.data !== undefined && res.data.data !== null && res.data.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data.data
							uni.hideLoading()
						} else {
							this.data = [...this.data, ...res.data.data]
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						this.bottom = false
					}
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: "none"
					});
					this.bottom = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cash_info_box {
		padding: 30rpx;
		box-sizing: border-box;

		.cash_info_list {
			box-sizing: border-box;
			margin-bottom: 30rpx;
			border-bottom: #eee 1px solid;
			position: relative;
			box-shadow: 7px 5px 30px -18px #888888;

			.cash_info_tit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: #eee 1px dashed;

				text {
					// color: #333;
					font-size: 32rpx;
				}
			}

			.cash_info_cont {
				display: flex;
				flex-direction: column;
				padding: 20rpx;

				text {
					font-size: 24rpx;
					color: #999;
					margin-top: 15rpx;
				}
			}

			.seal {
				position: absolute;
				right: 100rpx;
				bottom: 30rpx;
				border-radius: 15rpx;
				padding: 15rpx 25rpx;
				transform: rotate(20deg)
			}
		}
	}

	.black_y {
		color: #333;
	}

	.gray_y {
		color: #eee;
	}

	.green_y {
		color: #19be6b;
	}

	.red_y {
		color: #fa3534;
	}

	.warn_y {
		color: #ff9900;
	}
</style>